<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>护路护线</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row class="pd20 mt20">
      <a-col :span="6">
        街道名称：
        <a-input placeholder="请输入" v-model="queryForm.streeName" />
      </a-col>
      <a-col :span="6">
        街道类型：
        <a-input placeholder="请输入" v-model="queryForm.streeType" />
      </a-col>
      <a-col :span="6">
        设施类型：
        <a-input placeholder="请输入" v-model="queryForm.facilityType" />
      </a-col>
      <a-col :span="6">
        治安事件类型:
        <a-input placeholder="请输入" v-model="queryForm.securityCaseType" />
      </a-col>
      <a-col :span="6">
        治安状态：
        <a-input placeholder="请输入" v-model="queryForm.securityStatus" />
      </a-col>
      <a-col :span="6">
        路案类型：
        <a-input placeholder="请输入" v-model="queryForm.roadCaseType" />
      </a-col>
      <a-col :span="9">
        创建时间范围：
        <a-range-picker
          style="width: 330px; margin-left: 10px"
          v-model="dateRange"
          :placeholder="['开始日期', '结束日期']"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          :show-time="{
            hideDisabledOptions: true,
            defaultValue: [
              moment('00:00:00', 'HH:mm:ss'),
              moment('23:59:59', 'HH:mm:ss'),
            ],
          }"
          format="YYYY-MM-DD HH:mm:ss"
          @change="onChange"
        />
      </a-col>
      <a-col :span="3">
        <a-button type="primary" @click="handleSearch"> 查询 </a-button
        >&emsp;&nbsp;
        <a-button @click="reset">重置</a-button>
      </a-col>
    </a-row>
    <a-row class="pd20 mt20">
      <div class="flex-between mb10">
        <div class="flex-start">
          <a-button type="primary" @click="addFn">导入</a-button>
          <a-button type="primary" @click="addFn">导出</a-button>
        </div>
        <div class="flex-end">
          <a-button type="primary" @click="addFn">添加</a-button>
          <a-button v-if="false" type="danger" @click="delFn">删除</a-button>
        </div>
      </div>
      <a-spin :spinning="loading">
        <a-table
          :scroll="{ x: 500 }"
          :columns="columns"
          :data-source="tableData"
          :pagination="false"
          :row-key="(record) => record.id"
        >
          <template slot="description" slot-scope="text, record">
            <ToolTip :text="text" />
          </template>
          <span slot="status" slot-scope="text, record">
            <a-switch
              :checked="record.status === 0"
              @change="
                (checked) =>
                  changeStatus({
                    id: record.id,
                    status: record.status === 0 ? 1 : 0,
                  })
              "
            />
          </span>
          <span slot="action" slot-scope="text, record">
            <a @click="view(record)" v-hasPermi="['zhonghe:zzjglxgl:view']"
              >查看</a
            >
            <a-divider type="vertical" />
            <a @click="editFn(record)" v-hasPermi="['zhonghe:zzjglxgl:edit']"
              >修改</a
            >
            <a-divider type="vertical" />
            <a
              @click="delFn(record)"
              class="red"
              v-hasPermi="['zhonghe:zzjglxgl:del']"
              >删除</a
            >
          </span>
        </a-table>
        <div class="page_box">
          <a-pagination
            v-model="queryForm.offset"
            :page-size-options="['20', '30', '40', '50']"
            :total="total"
            show-size-changer
            :page-size="queryForm.current"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            :show-total="(total) => `共 ${total} 条`"
          ></a-pagination>
        </div>
      </a-spin>
    </a-row>
    <a-modal
      :title="title"
      :visible="dialogVisible"
      width="30%"
      @cancel="dialogVisible = false"
    >
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
        <a-form-item label="街道名称">
          <template v-if="type === 'View'">
            {{ currentRecord.streeName }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'streeName',
              {
                rules: [{ required: true, message: '请输入街道名称' }],
              },
            ]"
            placeholder="请输入街道名称"
          />
        </a-form-item>
        <a-form-item label="街道类型">
          <template v-if="type === 'View'">
            {{ currentRecord.streeType }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'streeType',
              {
                rules: [{ required: true, message: '请输入街道类型' }],
              },
            ]"
            placeholder="请输入街道类型"
          />
        </a-form-item>
        <a-form-item label="区域名称">
          <template v-if="type === 'View'">
            {{ currentRecord.zoneName }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'zoneName',
              {
                rules: [{ required: true, message: '请输入区域名称' }],
              },
            ]"
            placeholder="请输入区域名称"
          />
        </a-form-item>
        <a-form-item label="设施类型">
          <template v-if="type === 'View'">
            {{ currentRecord.facilityType }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'facilityType',
              {
                rules: [{ required: true, message: '请输入设施类型' }],
              },
            ]"
            placeholder="请输入设施类型"
          />
        </a-form-item>
        <a-form-item label="设施描述">
          <template v-if="type === 'View'">
            {{ currentRecord.facilityDesc }}
          </template>
          <a-textarea
            v-else
            style="width: 100%"
            v-decorator="[
              'facilityDesc',
              {
                rules: [{ required: true, message: '请输入设施描述' }],
              },
            ]"
            :rows="4"
            placeholder="请输入设施描述"
          />
        </a-form-item>
        <a-form-item label="治安事件类型">
          <template v-if="type === 'View'">
            {{ currentRecord.securityCaseType }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'securityCaseType',
              {
                rules: [{ required: true, message: '请输入治安事件类型' }],
              },
            ]"
            placeholder="请输入治安事件类型"
          />
        </a-form-item>
        <a-form-item label="治安状态">
          <template v-if="type === 'View'">
            {{ currentRecord.securityStatus }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'securityStatus',
              {
                rules: [{ required: true, message: '请输入治安状态' }],
              },
            ]"
            placeholder="请输入治安状态"
          />
        </a-form-item>
        <a-form-item label="治安报告事件描述">
          <template v-if="type === 'View'">
            {{ currentRecord.securityCaseReport }}
          </template>
          <a-textarea
            v-else
            style="width: 100%"
            v-decorator="[
              'securityCaseReport',
              {
                rules: [{ required: true, message: '请输入治安报告事件描述' }],
              },
            ]"
            :rows="4"
            placeholder="请输入治安报告事件"
          />
        </a-form-item>
        <a-form-item label="联防活动">
          <template v-if="type === 'View'">
            {{ currentRecord.joinDefenceActiveName }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'joinDefenceActiveName',
              {
                rules: [{ required: true, message: '请输入联防活动' }],
              },
            ]"
            placeholder="请输入联防活动"
          />
        </a-form-item>
        <a-form-item label="联防开始时间">
          <template v-if="type === 'View'">
            {{ currentRecord.activeStartTime }}
          </template>
          <a-date-picker
            v-else
            style="width: 100%"
            show-time
            valueFormat="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择上报时间"
            v-decorator="[
              'activeStartTime',
              { rules: [{ required: true, message: '请选择联防开始时间' }] },
            ]"
          />
        </a-form-item>
        <a-form-item label="联防结束时间">
          <template v-if="type === 'View'">
            {{ currentRecord.activeEndTime }}
          </template>
          <a-date-picker
            v-else
            style="width: 100%"
            show-time
            valueFormat="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择上报时间"
            v-decorator="[
              'activeEndTime',
              { rules: [{ required: true, message: '请选择联防结束时间' }] },
            ]"
          />
        </a-form-item>
        <a-form-item label="路案类型">
          <template v-if="type === 'View'">
            {{ currentRecord.roadCaseType }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'roadCaseType',
              {
                rules: [{ required: true, message: '请输入路案类型' }],
              },
            ]"
            placeholder="请输入路案类型"
          />
        </a-form-item>
        <a-form-item label="路案状态">
          <template v-if="type === 'View'">
            {{
              currentRecord &&
              (
                roadCaseStatusList.find(
                  (item) => item.value === currentRecord.roadCaseStatus
                ) || { label: "" }
              ).label
            }}
          </template>
          <a-select
            v-else
            style="width: 100%"
            v-decorator="[
              'roadCaseStatus',
              { rules: [{ required: true, message: '请选择路案状态' }] },
            ]"
            placeholder="请选择路案状态"
          >
            <a-select-option
              v-for="(item, index) in roadCaseStatusList"
              :key="index"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="路案报告时间">
          <template v-if="type === 'View'">
            {{ currentRecord.roadReportTime }}
          </template>
          <a-date-picker
            v-else
            style="width: 100%"
            show-time
            valueFormat="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择上报时间"
            v-decorator="[
              'roadReportTime',
              { rules: [{ required: true, message: '请选择路案报告时间' }] },
            ]"
          />
        </a-form-item>
      </a-form>
      <template slot="footer">
        <BtnFooter
          :loading="submitLoading"
          :isShowOk="type !== 'View'"
          @cancel="dialogVisible = false"
          @ok="handleSubmit"
        />
      </template>
    </a-modal>
  </div>
</template>

<script>
import crudMixin from "@/mixins/crudMixin";
import BtnFooter from "@/component/btnFooter.vue";
export default {
  mixins: [crudMixin],
  components: {
    BtnFooter,
  },

  data() {
    return {
      dateRange: [],
      cancelText: "",
      okText: "",
      // 请求配置 - 这里定义每个操作的请求格式
      requestConfig: {
        Add: {
          method: "post",
          type: "formData", // 新增请求使用 formData 格式
          url: "/government-platform-center/roadCaseSecurity",
        },
        Edit: {
          method: "post",
          type: "formData", // 修改请求使用 JSON 格式
          url: "/government-platform-center/roadCaseSecurity/edit",
        },
        Del: {
          method: "post",
          type: "formData", // 删除请求使用 formData 格式
          url: "/government-platform-center/roadCaseSecurity/deleteById",
        },
        Detail: {
          method: "get",
          type: "json",
          url: "",
        },
        Get: {
          method: "get",
          type: "json",
          url: "/government-platform-center/roadCaseSecurity",
        },
      },
      // 模态框配置
      modalConfig: {
        addTitle: "新增路线信息 ",
        editTitle: "修改路线信息",
        viewTitle: "查看路线信息",
        deleteConfirm: "确定要删除该路线信息吗？删除后不可恢复！",
      },

      roadCaseStatusList: [
        {
          value: 0,
          label: "待处理",
        },
        {
          value: 1,
          label: "处理中",
        },
        {
          value: 2,
          label: "已处理",
        },
      ],

      // 表单对象
      form: this.$form.createForm(this, { name: "coordinated" }),

      // 列配置
      columns: [
        {
          title: "路线ID",
          dataIndex: "index",
          key: "index",
          customRender: (text, record, index) => {
            return index + 1;
          },
        },
        {
          title: "街道名称",
          dataIndex: "streeName",
          key: "streeName",
        },
        {
          title: "街道类型",
          dataIndex: "streeType",
          key: "streeType",
        },
        {
          title: "区域名称",
          dataIndex: "zoneName",
          key: "zoneName",
        },
        {
          title: "设施类型",
          dataIndex: "facilityType",
          key: "facilityType",
        },
        {
          title: "设施描述",
          dataIndex: "facilityDesc",
          key: "facilityDesc",
          scopedSlots: { customRender: "description" },
        },
        {
          title: "治安事件类型",
          dataIndex: "securityCaseType",
          key: "securityCaseType",
        },
        {
          title: "治安状态",
          dataIndex: "securityStatus",
          key: "securityStatus",
        },
        {
          title: "治安报告事件",
          dataIndex: "securityCaseReport",
          key: "securityCaseReport",
          scopedSlots: { customRender: "description" },
        },
        {
          title: "联防活动",
          dataIndex: "joinDefenceActiveName",
          key: "joinDefenceActiveName",
        },
        {
          title: "联防开始时间",
          dataIndex: "activeStartTime",
          key: "activeStartTime",
        },
        {
          title: "联防结束时间",
          dataIndex: "activeEndTime",
          key: "activeEndTime",
        },
        {
          title: "路案类型",
          dataIndex: "roadCaseType",
          key: "roadCaseType",
        },
        {
          title: "路案状态",
          dataIndex: "roadCaseStatus",
          key: "roadCaseStatus",
          customRender: (text) => {
            let findOne = this.roadCaseStatusList.find(
              (item) => item.value === text
            );
            return findOne ? findOne.label : "";
          },
        },
        {
          title: "路案报告时间",
          dataIndex: "roadReportTime",
          key: "roadReportTime",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          scopedSlots: { customRender: "action" },
        },
      ],
    };
  },

  methods: {
    handleSearch() {
      this.queryForm.offset = 1;
      this.getList();
    },
    formatAddData(data) {
      return {
        status: 0,
      };
    },
    addFn() {
      this.add();
    },
    editFn(val) {
      this.edit(val);
    },
    delFn(val) {
      this.del(val);
    },
    reset() {
      this.dateRange = [];
      this.cleanQuery();
    },
    // 处理日期范围变化
    onChange(dates, dateStrings) {
      if (dates) {
        this.queryForm.startTime = dateStrings[0];
        this.queryForm.endTime = dateStrings[1];
      } else {
        this.queryForm.startTime = null;
        this.queryForm.endTime = null;
      }
    },
  },

  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.ant-row {
  border-radius: 5px;
  background: #fff;
  color: #000;
}

v-deep {
  .ant-table-thead > tr > th {
    color: #000;
    font-weight: bold;
  }
  .ant-table-tbody > tr > td {
    color: #000;
  }
  .el-table thead {
    color: black;
    font-weight: bold;
    background: #fafafa;
  }
  .el-table th.el-table__cell {
    background: #fafafa;
  }
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

@media screen and (max-width: 1300px) {
  .el-input {
    width: 70%;
  }

  .el-select {
    width: 70%;
  }

  .app {
    width: calc(100% - 50px);
  }
}

@media screen and (max-width: 1100px) {
  .el-input {
    width: 90%;
  }

  .el-select {
    width: 90%;
  }
}
.img {
  width: 50px;
  height: 50px;
}
.btn_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
</style>
